<!--故障报修-->
<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title style="text-align: center">故障报修</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content scrollY="false">
    <Tabs
            [page]="2"
            [useOnPan]="true"
            [swipeable]="true"
            [activeTab]="index"
            [tabBarActiveTextColor]="'#1890ff'"
            (onChange)="onChange($event)"
            (onTabClick)="onTabClick($event)">
        <!-- 故障报修 -->
        <TabPane [title]="titleTemplate">
            <ng-template #titleTemplate>
                <div>故障报修</div>
            </ng-template>
            <div style="align-items: center;justify-content: center;background-color: #fff">
                <ng-form [formGroup]="formData">
                    <List>
                        <InputItem [placeholder]="'请输入故障名称'"
                                   [value]="formData.name"
                                   [content]="'故障名称'"
                                   clear="true"
                                   maxLength="64"
                                   class="required"
                                   required
                                   formControlName="name"
                                   id="name"></InputItem>

                        <InputItem [placeholder]="'请输入报修产品'"
                                   [value]="formData.controls['equipmentid'].value?formData.controls['equipmentid'].value.name:null"
                                   [content]="'报修产品'"
                                   class="required"
                                   required
                                   formControlName="equipmentid"
                                   id="equipmentid"
                                   editable="false"
                                   (click)="afterHelpAssociatedEquipment()"></InputItem>

                        <InputItem [placeholder]="'请输入故障模式'"
                                   [value]="formData.controls['faulttype'].value?formData.controls['faulttype'].value.name:null"
                                   [content]="'故障模式'"
                                   class="required"
                                   required
                                   formControlName="faulttype"
                                   id="faulttype"
                                   editable="false"
                                   (click)="afterHelpFaultType()"></InputItem>

                        <InputItem [placeholder]="'请输入故障级别'"
                                   [value]="formData.controls['faultlevel'].value?formData.controls['faultlevel'].value.name:null"
                                   [content]="'故障级别'"
                                   class="required"
                                   required
                                   formControlName="faultlevel"
                                   id="faultlevel"
                                   editable="false"
                                   (click)="afterHelpFaultLevel()"></InputItem>

                        <InputItem [placeholder]="'请输入故障状态'"
                                   [value]="showFaultState"
                                   [content]="'故障状态'"
                                   class="required"
                                   required
                                   formControlName="state"
                                   id="state"
                                   editable="false"
                                   (click)="afterHelpFaultState()"></InputItem>

                        <InputItem [placeholder]="'请输入故障原因'"
                                   [value]="formData.controls['faultcause'].value?formData.controls['faultcause'].value.name:null"
                                   [content]="'故障原因'"
                                   class="required"
                                   required
                                   formControlName="faultcause"
                                   id="faultcause"
                                   editable="false"
                                   (click)="afterHelpFaultCause()"></InputItem>

                        <InputItem [placeholder]="'请输入故障位置'"
                                   [value]="formData.controls['faultLocation'].value"
                                   [content]="'故障位置'"
                                   maxLength="64"
                                   class="required"
                                   required
                                   formControlName="faultLocation"
                                   id="faultLocation"></InputItem>

                        <InputItem [placeholder]="'请输入登记人'"
                                   [value]="formData.controls['registrant'].value?formData.controls['registrant'].value.name:null"
                                   [content]="'登记人'"
                                   class="required"
                                   required
                                   formControlName="registrant"
                                   id="registrant"
                                   editable="false"
                                   (click)="afterHelpFaultRegistrant()"></InputItem>

                        <!--                        <InputItem [placeholder]="'请输入发现时间'"-->
                        <!--                                   [value]="formData.discoveryTime"-->
                        <!--                                   [content]="'发现时间'"-->
                        <!--                                   class="required"-->
                        <!--                                   required-->
                        <!--                                   formControlName="discoveryTime"-->
                        <!--                                   id="discoveryTime"></InputItem>-->

                        <ListItem
                                class="required"
                                formControlName="discoveryTime"
                                DatePicker
                                [extra]="currentDateFormat(formData.controls['discoveryTime'].value?formData.controls['discoveryTime'].value:value)"
                                [arrow]="'horizontal'"
                                [mode]="'datetime'"
                                [(ngModel)]="value"
                                (onOk)="onOk($event)"
                        ><span style="font-size: 14px">发现时间</span>
                        </ListItem>

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.product"-->
                        <!--                                   [content]="'报修产品'"-->
                        <!--                                   class="required"-->
                        <!--                                   required-->
                        <!--                                   formControlName="product"-->
                        <!--                                   id="product"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.number"-->
                        <!--                                   [content]="'出厂编号'"-->
                        <!--                                   class="required"-->
                        <!--                                   required-->
                        <!--                                   formControlName="number"-->
                        <!--                                   id="number"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.code"-->
                        <!--                                   [content]="'唯一标识码'"-->
                        <!--                                   formControlName="code"-->
                        <!--                                   id="code"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.processUnit"-->
                        <!--                                   [content]="'处理单位'"-->
                        <!--                                   formControlName="processUnit"-->
                        <!--                                   id="processUnit"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.applyUnit"-->
                        <!--                                   [content]="'报修单位'"-->
                        <!--                                   formControlName="applyUnit"-->
                        <!--                                   id="applyUnit"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.applyUser"-->
                        <!--                                   [content]="'报修联系人'"-->
                        <!--                                   formControlName="applyUser"-->
                        <!--                                   id="applyUser"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.applyMobile"-->
                        <!--                                   [content]="'联系电话'"-->
                        <!--                                   formControlName="applyMobile"-->
                        <!--                                   id="applyMobile"></InputItem>-->

                        <!--                        <InputItem [placeholder]="'请输入'"-->
                        <!--                                   [value]="formData.address"-->
                        <!--                                   [content]="'故障地址'"-->
                        <!--                                   formControlName="address"-->
                        <!--                                   id="address"></InputItem>-->

                        <!--                        <TextareaItem [placeholder]="'请输入故障问题'"-->
                        <!--                                      [value]="formData.description"-->
                        <!--                                      formControlName="description"-->
                        <!--                                      rows="4"-->
                        <!--                                      maxlength="200"-->
                        <!--                                      id="description"></TextareaItem>-->

                    </List>
                    <div style="margin-top: 8px">
                        <label style="margin-left: 8px;font-size: 14px">图片 (2/6)</label>
                        <ImagePicker
                                [files]="files"
                                [length]="6"
                                [selectable]="files.length < 7"
                                (onImageClick)="imageClick($event)"
                                (onChange)="imageChange($event)"
                                (onAddImageClick)="addImageClick($event)"
                        ></ImagePicker>
                    </div>
                    <div style="margin-top: 8px">
                        <ion-icon src="assets/icon/save.svg"
                                  style="width: 22px;height: 30px;margin-left: 8px"></ion-icon>
                        <nzm-button style="margin-left: 8px;margin-right: 8px;width: 300px" type="primary"
                                    [inline]="true" [size]="'small'" (onClick)="saveOne()">提交
                        </nzm-button>
                    </div>
                </ng-form>
            </div>
        </TabPane>

        <!-- 我的报修 -->
        <TabPane [title]="titleTemplate1">
            <ng-template #titleTemplate1>
                <div>我的报修</div>
            </ng-template>
            <div style="align-items: center;justify-content: center;background-color: #fff">
                <ion-list lines="none" *ngFor="let item of myFaultList" style="padding: 0px">
                    <Card [full]="true" style="padding: 16px 6px;background-color: #f8f8f8">
                        <ion-item style="margin-top: -8px">
                            <label class="label1">报修产品</label>
                            <label class="label2">{{item.equipmentid ? item.equipmentid.name : null}}</label>
                            <ion-icon size="lg" slot="end" src="assets/icon/solved.svg"></ion-icon>
<!--                            <ion-icon *ngIf="item.solve" size="lg" slot="end" src="assets/icon/solved.svg"></ion-icon>-->
<!--                            <ion-icon *ngIf="!item.solve" size="lg" slot="end"-->
<!--                                      src="assets/icon/unsolved.svg"></ion-icon>-->
                        </ion-item>
                        <ion-item style="margin-top: -8px" *ngIf="item.expand">
                            <label class="label1">故障模式</label>
                            <label class="label2">{{item.faulttype ? item.faulttype.name : null}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px" *ngIf="item.expand">
                            <label class="label1">故障级别</label>
                            <label class="label2">{{item.faultlevel ? item.faultlevel.name : null}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px" *ngIf="item.expand">
                            <label class="label1">故障状态</label>
                            <label class="label2">{{item.state}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px" *ngIf="item.expand">
                            <label class="label1">故障原因</label>
                            <label class="label2">{{item.faultcause ? item.faultcause.name : null}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px">
                            <label class="label1">故障位置</label>
                            <label class="label2">{{item.faultLocation}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px">
                            <label class="label1">登记时间</label>
                            <label class="label2">{{item.discoveryTime}}</label>
                        </ion-item>
                        <ion-item style="margin-top: -8px;margin-bottom: -16px" button detail="false"
                                  (click)="expandChange(item,item.expand)">
                            <Icon *ngIf="item.expand" class="icon1" src="assets/icon/up.svg"></Icon>
                            <Icon *ngIf="!item.expand" class="icon1" src="assets/icon/down.svg"></Icon>
                        </ion-item>
                    </Card>
                </ion-list>
                <!-- 演示数据 -->
                <!--                <ion-list lines="none" *ngFor="let i of myList" style="padding: 0px">-->
                <!--                    <Card [full]="true" style="padding: 16px 6px;background-color: #f8f8f8">-->
                <!--                        <ion-item style="margin-top: -8px">-->
                <!--                            <label class="label1">报修产品</label>-->
                <!--                            <label class="label2">{{i.myProduct}}</label>-->
                <!--                            <ion-icon *ngIf="i.solve" size="lg" slot="end" src="assets/icon/solved.svg"></ion-icon>-->
                <!--                            <ion-icon *ngIf="!i.solve" size="lg" slot="end" src="assets/icon/unsolved.svg"></ion-icon>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px" *ngIf="i.expand">-->
                <!--                            <label class="label1">出厂编号</label>-->
                <!--                            <label class="label2">{{i.myNumber}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px" *ngIf="i.expand">-->
                <!--                            <label class="label1">唯一标识码</label>-->
                <!--                            <label class="label2">{{i.myCode}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px" *ngIf="i.expand">-->
                <!--                            <label class="label1">处理单位</label>-->
                <!--                            <label class="label2">{{i.myProcessUnit}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px" *ngIf="i.expand">-->
                <!--                            <label class="label1">报修单位</label>-->
                <!--                            <label class="label2">{{i.myApplyUnit}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px">-->
                <!--                            <label class="label1">报修联系人</label>-->
                <!--                            <label class="label2">{{i.myApplyUser}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px">-->
                <!--                            <label class="label1">联系电话</label>-->
                <!--                            <label class="label2">{{i.myApplyMobile}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px" *ngIf="i.expand">-->
                <!--                            <label class="label1">故障地址</label>-->
                <!--                            <label class="label2">{{i.myAddress}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px">-->
                <!--                            <label class="label1">故障描述</label>-->
                <!--                            <label class="label2">{{i.myDescription}}</label>-->
                <!--                        </ion-item>-->
                <!--                        <ion-item style="margin-top: -8px;margin-bottom: -16px" button detail="false"-->
                <!--                                  (click)="expandChange(i,i.expand)">-->
                <!--                            <Icon *ngIf="i.expand" class="icon1" src="assets/icon/up.svg"></Icon>-->
                <!--                            <Icon *ngIf="!i.expand" class="icon1" src="assets/icon/down.svg"></Icon>-->
                <!--                        </ion-item>-->
                <!--                    </Card>-->
                <!--                </ion-list>-->
            </div>
        </TabPane>
    </Tabs>
</ion-content>
